<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{width:250px;border: solid 1px black;float: left;text-align: center;}
        .box img{width:80%}
        .box p{line-height: 20px;height:40px;overflow: hidden;}
    </style>
</head>
<body>
    <div id="cont"></div>
    <script src="./data.js"></script>
    <script>
        // 2. 根据商品数据，实现商品列表布局
        //     - 利用到提供的所有素材数据，还要美化页面
        // var str = "";
        // data.forEach(function(val){
        //     str += '<div class="box"><img src="'+ val.img +'" alt=""><p>'
        //         + val.proName +'</p><span>折扣：'+val.discount+'折</span> <span>价格： '
        //             + val.price +'</span><p><span>已售：'
        //                 +val.sales+'</span> <span>库存： '
        //                     + val.stock +'</span> </p> <p>评分：'
        //                         +val.tip+' </p> </div>';
        // })
        // var cont = document.getElementById("cont");
        // cont.innerHTML = str;

        // 3. 定义一个30项的数组，数组的每一项要求都是**1~9之间的随机数**，每间隔5个数字，求出这五个数的平均值
        // var arr = [];
        // for(var i=0;i<30;i++){
        //     arr[i] = ( Math.round( Math.random() * (9-1) + 1 ) );
        // }
        // console.log(arr);
        // for(var i=0;i<arr.length;i+=5){
        //     var a = arr.slice(i, i+5);
        //     console.log(a);
        //     console.log(avg(a));
        // }
        // function avg(a){
        //     var sum = 0;
        //     for(var i=0;i<a.length;i++){
        //         sum += a[i];
        //     }
        //     return sum / a.length;
        // }

        // 4. 通过循环制造一个5 x 5的二维数组，这个数组中的数据是**1~9之间的随机数**，试编程
        //     - [[],[],[],[],[]]
        // var bigArr = [];
        // for(var i=0;i<5;i++){
        //     var sArr = [];
        //     for(var j=0;j<5;j++){
        //         sArr.push( Math.round( Math.random() * (9-1) + 1 ) );
        //     }
        //     bigArr.push(sArr);
        // }
        // console.log(bigArr);

        // 5. 封装函数，实现随机rgb颜色，结果为字符
        //     - 颜色值的范围：0~255
        // function color() {
        //     var r = Math.round(Math.random() * 255 + 1);
        //     var g = Math.round(Math.random() * 255 + 1);
        //     var b = Math.round(Math.random() * 255 + 1);
        //     return "rgb(" + r + ',' + g + ',' + b + ")";
        // }
        // console.log(color());

        // 6. 封装函数，实现随机十六进制的颜色，结果为字符
        //     - 颜色值的范围：0~255
        // function color() {
        //     return '#' + Math.round(Math.random() * 0xffffff).toString(16);
        // }
        // console.log(color());

        // 7. 封装函数，实现4位数字的随机验证码
        // function code(){
        //     var arr = [];
        //     for(var i =0; i<4; i++){
        //         arr.push( Math.round( Math.random() * 9));
        //     }
        //     return arr.toString()
        // }
        // console.log(code());

        // 8. 封装函数，实现4位数字字母混合的随机验证码

        // function randomCode2(){
        //     var s = "";

        //     for(var i=0;i<10;i++){
        //         s += random(0, 9);
        //         s += String.fromCharCode(random(97, 122));
        //         s += String.fromCharCode(random(65, 90));
        //     }

        //     var str = "";
        //     for(var i=0;i<4;i++){
        //         str += s[random(0, s.length-1)]
        //     }

        //     return str;
        // }
        // console.log(randomCode2());

        // 10. 使用字符串拼接操作，配合日期对象，格式化日期：
        //     - 返回值：yyyy年mm月dd日 星期d hh:mm:ss
        //     - 注意：月份，星期，注意小于10的数字的处理
        // var d = new Date();
        // var y = d.getFullYear(); 
        // var m = d.getMonth() + 1; 
        // var date = d.getDate();
        // var day = d.getDay() + 1;
        // var h =  d.getHours();
        // var min = d.getMinutes();
        // var s = d.getSeconds();
        // var str = y + "年" + m  + "月" + date + "日" + " " + "星期" + day + " " + h + ":" + min + ":" + s;
        // console.log(str);

        // 11. 封装计算两个日期之间差值的函数
        //     - 利用参数，传入两个指定日期（字符）
        //     - 返回值为对象，如：{day:x, hour: y, minu: z, sec: s} 

        // function date(d1, d2){
        //     d1 = new Date(d1);
        //     if(d2){
        //         d2 = new Date(d2);
        //     }else{
        //         d2 = new Date();
        //     }
        //     var t = Math.abs(d1.getTime() - d2.getTime());
        //     var day = parseInt(t/1000/60/60/24);
        //     var h = parseInt((t - (day*24*60*60*1000))/1000/60/60);
        //     var m = parseInt((t - (day*24*60*60*1000) - (h*60*60*1000))/1000/60);
        //     var s = parseInt((t - (day*24*60*60*1000) - (h*60*60*1000) - (m*1000*60))/1000);
        //     return {
        //         day: day,
        //         hour: h,
        //         minu: m,
        //         sec: s
        //     }
        // }
        // console.log(date("2008.8.8", "2022.8.8"));
    </script>
</body>
</html>